<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 
  <!-- 引入必要的样式和脚本文件 -->
  <link rel="stylesheet" href="bootstrap.min.css">
  </link>
  <script src="jquery-3.5.1.min.js"></script>
  <script src="bootstrap.min.js"></script>

  <link rel="stylesheet" href="./summernote/summernote.min.css">
  <script src="./summernote/summernote.min.js"></script>
  <script src="./summernote/summernote-zh-CN.min.js"></script>

  <!-- 引入自定义组件 -->
  <script src="./summernote/summernote-component.js"></script>

  <style>
    .modal-backdrop{
      display: none !important;
    }
  </style>
</head>
 
<body>
  <div style="height: 500px;" id="summernote1" class="summernote"></div>
  <!-- <button id="summernote1-submit">获取富文本 1</button> -->

  <div style="height: 500px;" id="summernote2" class="summernote"></div>
  <div style="height: 500px;" id="summernote3" class="summernote"></div>
  <div style="height: 500px;" id="summernote4" class="summernote"></div>
  <div style="height: 500px;" id="summernote5" class="summernote"></div>
  <div style="height: 500px;" id="summernote6" class="summernote"></div>
  <!-- <button id="summernote2-submit">获取富文本 2</button> -->


  <button onclick="getData()">获取</button>
  <script>
    // 如果需要额外的操作或自定义逻辑，可以在这里添加
    function getData() {
     let data =  SummernoteComponent.getContent('#summernote1');
     console.log(data)
    }
    SummernoteComponent.setContent('#summernote1','<h1>123</h1>')
  </script>
</body>

</html>